<template>
  <div class="enter-advertising-add">
    <van-nav-bar title="发布" left-arrow @click-left="back()" />
    <baidu-map id="allmap" class="allmap" @ready="handler"></baidu-map>
    <div class="content border">
      <input
        placeholder-class="phcolor"
        placeholder="输入标题...(选填)"
        v-model="formData.title"
        class="input"
        type="text"
      />
      <textarea
        placeholder-class="phcolor"
        maxlength="-1"
        v-model="formData.text"
        class="textarea"
        placeholder="要发布的内容..."
      ></textarea>
      <div class="user-info">
        <van-tag
          style="margin-right: 10px;"
          round
          text-color="#8a8a8a"
          color="#f4f4f4"
          size="large"
        >
          <div class="tag" @click="mapShow = true">
            <van-icon class="icon" name="location" />
            <div class="text">
              {{currentAddress || '你在哪里？'}}
            </div>
          </div>
        </van-tag>
        <!-- <van-tag round text-color="#8a8a8a" color="#f4f4f4" size="large">
          <div class="tag">
            <van-icon class="icon" name="phone" />
            <div class="text">
              13527783971
            </div>
          </div>
        </van-tag> -->
      </div>
      <div class="accessory">
        <van-icon name="photo-o" />
      </div>
      <div class="accessory-upload">
        <van-uploader image-fit="containc" max-count="12" :file-list="fileList" :before-read="handlerReadAfterList" @delete="handlerUploadDelete"/>
      </div>
    </div>
    <!-- <div class="content" style="margin-bottom: 10px">
      <div class="title">选择发布类型</div>
      <div class="tag-container">
        <div class="tag-item selector">不选择分类</div>
        <div class="tag-item">不选择分类</div>
        <div class="tag-item">不选择分类</div>
        <div class="tag-item">不选择分类</div>
        <div class="tag-item">不选择分类</div>
      </div>
    </div> -->
    <!-- <div class="content flex">
      <div class="title">我要置顶</div>
      <div>
        <van-switch active-color="#ed8131"/>
      </div>
    </div> -->
    <!-- <div style="padding: 10px;color: #9b9b9b;">
      <van-checkbox checked-color="#ed8131" icon-size="16px">
        我已阅读同意《平台用户服务协议》
      </van-checkbox>
    </div> -->
    <van-button
      class="submit-button"
      color="#ee8131"
      type="primary"
      size="large"
      @click="handlerSubmit"
      >立即发布</van-button
    >
    <van-popup
      v-model="mapShow"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
    <AddressMap @handlerBack="mapShow=false" @handlerGetPoi="handlerGetPoi"/>
    </van-popup>
  </div>
</template>
<script>
import { postUpload, edit_adv, add_adv, adv_detail } from "../../../api/ajax";
import AddressMap from '../../../components/addressMap/addressMap'
import { Toast } from 'vant';

export default {
  components: {
    AddressMap
  },
  data() {
    return {
      id: '',
      currentAddress: '',
      fileList: [],
      formData: {},
      mapShow: false
    };
  },
  methods: {
    async postUpload(file, cb) {
      let form = new FormData();
      form.append('file', file);
      const result = await postUpload(form, { contentType: 'multipart/form-data' })
      if (result) {
        cb && cb(result)
      }
    },
    handler({ BMap, map }) {
      this.loacl(BMap, map, (data={}) => {
        if(!this.id) {
          this.currentAddress = data.address || '';
          this.formData.lat = data.point.lat;
          this.formData.lng = data.point.lng;
        } else {
          this.getAdvDetail(BMap);
        }
      });
    },
    handlerGetPoi({center, formattedAddress, addressDetails}) {
      this.formData.lng = center[0];
      this.formData.lat = center[1];
      this.currentAddress = formattedAddress;
      this.mapShow = false;
    },
    handlerReadAfterList(file) {
      return new Promise((resolve, reject) => {
        this.postUpload(file, (result) => {
          if(result.code == 1) {
            this.fileList.push({
              url: result.filepath
            });
            console.log(this.fileList)
            resolve(true);
          }else {
            reject(false);
          }
        });
      })
    },
    handlerSubmit() {
      const image = this.fileList.map(item => item.url);
      const params = {
        ...this.formData,
        image
      };
      if(this.id) {
        params.id = this.id
      };
      const api = { add_adv, edit_adv };
      api[!!params.id ? 'edit_adv' : 'add_adv'](params).then(res => {
        if(res.code === 1) {
          Toast.success(!!params.id ? '修改成功' : '发布成功');
          setTimeout(() => {
            this.back();
          }, 600)
        }
      })
      console.log(params);
    },
    handlerUploadDelete({ url }) {
      const index = this.fileList.findIndex(item => item.url === url);
      this.fileList.splice(index, 1);
    },
    getAdvDetail(BMap) {
      const { id } = this.$route.query;
      if(!id) return;
      adv_detail({ id }).then(res => {
        if(res.code === 1) {
          let fileList = (res.data.image || []).map(url => {
            return { url }
          })
          // this.currentAddress = 'currentAddress'
          this.formData = res.data || {};
          this.fileList = fileList;
          this.getAddressByLocation(BMap, { lng: res.data.lng, lat: res.data.lat }, (e) => {
            this.currentAddress = e.address;
          })
        }
      })
    }
  },
  mounted() {
    this.id = this.$route.query.id;
  }
};
</script>
<style lang="scss">
.enter-advertising-add {
  * {
    box-sizing: border-box;
  }
  height: 100%;
  padding-bottom: 40px;
  .content {
    background-color: #fff;
    padding: 0 15px;
    &.flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &.border {
      border-bottom: 1px solid #e6e6e6;
    }
    .input {
      margin-top: 20px;
      border: none;
      border-bottom: 1px solid #e6e6e6;
      height: 40px;
      font-size: 14px;
      width: 100%;
    }
    .textarea {
      font-size: 14px;
      width: 100%;
      padding-top: 10px;
      border: none;
      height: 200px;
    }
    .user-info {
      padding-bottom: 14px;
      border-bottom: 1px solid #e4e4e4;
      .tag {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #a1a8b2;
        padding: 0 2px;
        .icon {
          color: #a1a8b2;
          margin-right: 4px;
          transform: translateY(1px);
        }
        .text {
          color: #a1a8b2;
          font-size: 12px;
        }
      }
    }
    .accessory {
      height: 40px;
      display: flex;
      align-items: center;
      font-size: 20px;
      color: #a2a8b2;
    }
    .accessory-upload {
      .van-uploader__preview-image,
      .van-uploader__upload {
        width: calc(25vw - 16px) !important;
        height: calc(25vw - 16px) !important;
      }
    }
    .title {
      line-height: 50px;
      font-size: 14px;
      color: #333;
    }
    .tag-container {
      overflow: hidden;
      .tag-item {
        padding: 0 3px;
        background-color: #f4f4f4;
        color: #5d5d5d;
        border-radius: 40px;
        padding: 6px 12px;
        box-sizing: border-box;
        border: 1px solid #f4f4f4;
        &.selector {
          border: 1px solid #ed8131;
          color: #ed8131;
          background-color: #fff;
        }
        margin-right: 10px;
        margin-bottom: 10px;
        float: left;
      }
    }
  }
  .submit-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
